<template>
  <div class="label">
    <div class="stand" v-for="(item,key) in lists " :key="key">{{item.context}}</div>
  </div>
  <div class="slider-wrap">
    <sliderContent/>
    <!-- <div class="top">
      <div class="sliderPanel">
        <div v-for="(item,index) in imgArray" :key="index" class="verticalCenter picbox">
          <transition name="slide-fade">
            <img
              :style="{width:width,top:top}"
              @mouseover="clearAuto"
              @mouseout="slideAuto"
              v-show="index===selectIndex"
              :src="item.url"
              style="min-height: 100%"
            />
          </transition>
        </div>
      </div>
      <div
        click="clickLeft"
        @mouseover="clearAuto"
        @mouseout="slideAuto"
        class="arrowLeft verticalCenter horizaCenter"
      >左移</div>
      <div
        @click="clickRight"
        @mouseover="clearAuto"
        @mouseout="slideAuto"
        class="arrowRight verticalCenter horizaCenter"
      >右移</div>
      <div class="sliderBar horizaCenter">
        <div
          v-for="(item,index) in imgArray"
          :key="index"
          @mouseover="clearAuto"
          @mouseout="slideAuto"
          @click="setIndex(index)"
          class="circle"
          :class="{circleSelected:index===selectIndex}"
        ></div>
      </div>
    </div> -->
    <div class="bottom" style="background:red"></div>
  </div>
  <div class="playlist"> 
    <span style="height: 40px;
    line-height: 40px;
    float: left;
    margin: 10px;">推荐歌单</span>
    <div>
      <img style="height:15px;float:left;margin:22px" src="../../assets/right.png" alt="">
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import sliderContent from '@/components/sliderContent/sliderContent.vue'

const SCREEN_WIDTH = document.body.clientWidth; //网页可见区域宽
const SCREEN_HEIGHT = document.body.scrollHeight; //网页正文全文高
var selectIndex = 0;
var timer = null;
export default {
  name: "ErCarousel",
  components: {
    'sliderContent': sliderContent
  },
  data() {
    return {
      selectIndex: 0,
      width: "100%",
      height: SCREEN_HEIGHT + "px",
      top: 0,
      imgArray: [
        {
          url: require("@/components/carousel/1.jpg")
        },
        {
          url: require("@/components/carousel/2.jpg")
        },
        {
          url: require("@/components/carousel/3.jpg")
        }
      ],
      lists: [
        { context: "个性推荐" },
        { context: "歌单" },
        { context: "主播电台" },
        { context: "排行榜" },
        { context: "歌手" },
        { context: "最新音乐" }
      ]
    };
  },
  methods: {
    slideAuto: function() {
      var that = this;
      timer = setInterval(function() {
        that.clickRight();
      }, 3000);
      //clearInterval(timer);
    },
    clearAuto: function() {
      clearInterval(timer);
    },
    clickLeft: function() {
      if (this.selectIndex == 0) {
        this.selectIndex = this.imgArray.length - 1;
      } else {
        this.selectIndex--;
      }
      console.log(this.selectIndex);
    },
    clickRight: function() {
      if (this.selectIndex == this.imgArray.length - 1) {
        this.selectIndex = 0;
      } else {
        this.selectIndex++;
      }
    },
    setIndex: function(index) {
      this.selectIndex = index;
    }
  },
  mounted: function() {
    this.slideAuto();
  }
};
</script>
<style lang='scss' scoped>
@font-face {
  font-family: "iconfont"; /* Project id 2528550 */
  src: url("//at.alicdn.com/t/font_2528550_8eo6drkxr9b.woff2?t=1620717183679")
      format("woff2"),
    url("//at.alicdn.com/t/font_2528550_8eo6drkxr9b.woff?t=1620717183679")
      format("woff"),
    url("//at.alicdn.com/t/font_2528550_8eo6drkxr9b.ttf?t=1620717183679")
      format("truetype");
}
.slider-wrap {
  .top {
    width: 60%;
    margin: 0 auto;
    height: 6%;
  }
}
.label {
  display: inline-block;
  width: 100%;
  .stand {
    height: 40px;
    line-height: 40px;
    float: left;
    margin: 10px;
  }
}
.playlist{
  height: 100%;
  width: 100%;
}
</style>
